<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {
  DeleteRelationDevice
} from '@/api/publicApi'

const props = defineProps({
  tableData: {
    type: Array,
    default: () => {}
  },
  getMaintenanceData: {
    type: Function,
    default: () => { }
  },
  updateMaintenance: {
    type: Function,
    default: () => { }
  } 
}) 

// 表格

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = ref({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 函数
// 删除某项
const deleteItem = (row:any) => {
  //  删除保养信息
  // this.$messageBox('是否删除').then(() => {
  //   DeleteRelationDevice({ id: row.id }).then(res => {
  //     if (res.success == true) {
  //       this.$message.success('删除成功')
  //       this.getList()
  //     }
  //   })
  // })
}

const handlePlanSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  props.getMaintenanceData()
}
const handlePlanCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  props.getMaintenanceData()
}

// 向外暴露的函数与变量
defineExpose({
  pageInfo
})
</script>

<template>
  <el-table
    :cell-style="cellStyle"
    :header-cell-style="headStyle"
    :data="props.tableData"
    max-height="320"
  >
    <el-table-column
      prop="deviceName"
      label="设备名称"
    />
    <el-table-column
      prop="creationTime"
      label="保养时间"
    />
    <el-table-column
      prop="userName"
      label="保养者"
    />
    <el-table-column
      prop="mainTainSuggestion"
      label="保养建议"
    />
    <el-table-column
      prop="mainTainReason"
      label="保养原因"
    />
    <el-table-column
      label="操作"
    />
  </el-table>
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
</template>

<style scoped lang=scss>
.pagination-box {
  margin-top: 10px;
}
</style>